<template>
	<el-dialog :title="dialogTitle" :visible.sync="visible" fullscreen append-to-body custom-class="policy_dialog_wrapper">
		<el-form v-bind="policyConfig" :model="formData" :rules="formRules" v-loading="loading">
			<div class="policy_form_content">
				<el-form-item label="新闻标题" prop="title">
					<el-input v-model="formData.title" placeholder="请输入新闻标题" maxlength="30" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="新闻内容" prop="content" v-if="!!visible">
					<sw-tiny-editor v-model="formData.content" type="all" height="100%"></sw-tiny-editor>
				</el-form-item>
			</div>
			<div class="policy_form_attrbox">
				<div class="attrs">
					<el-form-item label="新闻作者" prop="author">
						<el-input v-model="formData.author" placeholder="请输入新闻作者"></el-input>
					</el-form-item>
					<el-form-item label="发布时间" prop="pudDate">
						<el-date-picker v-model="formData.pudDate" type="datetime" placeholder="选择日期时间" style="width: 100%"></el-date-picker>
					</el-form-item>
					<el-form-item label="排序" prop="orderBy">
						<el-input-number v-model="formData.orderBy" controls-position="right" :min="1" style="width: 100%"></el-input-number>
					</el-form-item>
					<el-form-item label="新闻来源" prop="source">
						<el-input v-model="formData.source" placeholder="请输入新闻来源"></el-input>
					</el-form-item>
				</div>
				<div class="button">
					<el-button size="medium" type="primary" :loading="loading" @click="handleSubmitForm()">{{ formTypeText }}</el-button>
					<el-button size="medium" @click="visible = false">取消</el-button>
				</div>
			</div>
		</el-form>
	</el-dialog>
</template>

<script>
import moment from 'moment';
import { mapGetters } from 'vuex';
import formMixins from '@/mixins/formMixins';
import { queryDetail, addedPolicy, updatePolicy } from '@/api/basedata/sysPolicy';
export default {
	mixins: [formMixins],
	data() {
		return {
			formName: '新闻',
			formRules: {
				title: [{ required: true, message: '请输入新闻标题', trigger: 'blur' }],
				author: [{ required: true, message: '请输入新闻作者', trigger: 'blur' }],
				pudDate: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
				content: [{ required: true, message: '请输入新闻内容', trigger: 'blur' }]
			},
			policyConfig: {
				ref: 'form',
				size: 'medium',
				labelPosition: 'top',
				class: 'policy_form_wrapper'
			}
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		detailData() {
			return eval(queryDetail);
		},
		callFunction() {
			return eval(this.addOrEdit ? addedPolicy : updatePolicy);
		}
	},
	methods: {
		formatFormParams() {
			if (!this.addOrEdit) return false;
			this.$set(this.formData, 'author', this.userInfo.username);
			this.$set(this.formData, 'pudDate', moment().format('YYYY-MM-DD HH:mm:ss'));
		}
	}
};
</script>
<style lang="scss">
.policy_dialog_wrapper .el-dialog__body {
	padding: 0;
}
</style>
<style lang="scss" scoped>
.policy_form_wrapper::v-deep {
	flex: 1;
	display: flex;
	overflow: hidden;
	.el-form-item__label {
		font-weight: bold;
	}
}
.policy_form_content {
	padding: 16px;
	flex: 1;
	overflow: hidden;
}
.policy_form_attrbox {
	display: flex;
	flex-direction: column;
	width: 20%;
	padding: 16px;
	min-width: 320px;
	border-left: solid 1px #e5e5e5;
	.attrs {
		flex: 1;
		overflow: auto;
	}
	.button {
		text-align: right;
	}
}
.sw_tinymce_editor {
	height: calc(100vh - 195px);
}
</style>
